<template>
  <Card
    hoverable
    style="width: 240px; height: 400px"
    :class="hover"
    @mouseover="mouseOverHandler"
    @mouseleave="mouseLeaveHandler"
  >
    <template #cover>
      <img alt="example" :src="photoUrl" style="width: 240px; height: 300px" />
    </template>
    <CardMeta :title="title"> </CardMeta>
  </Card>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { Card, CardMeta } from 'ant-design-vue';

export default defineComponent({
  components: {
    Card,
    CardMeta,
  },
  props: {
    photo: String,
    appName: String,
  },
  setup(props) {
    const title = ref(props.appName);
    const photoUrl = ref(props.photo);
    const hover = ref('rounded-t-lg opacity-90');
    function mouseOverHandler() {
      hover.value = 'rounded-t-lg opacity-100';
    }
    function mouseLeaveHandler() {
      hover.value = 'rounded-t-lg opacity-80';
    }
    return {
      title,
      photoUrl,
      mouseOverHandler,
      mouseLeaveHandler,
      hover,
    };
  },
});
</script>
